<template>
  <div class="container">
    <header class="header">
      <ul>
        <li>
          <a href="javascript:window.history.back();">
            <span class="icon">&#xe738;</span>
          </a>
        </li>
        <li>
          <h1>资讯</h1>
        </li>
        <li>
          <a href="#">
            <span class="icon">&#xe624;</span>
          </a>
        </li>
      </ul>
    </header>
    <nav class="nav">
      <ul>
        <li
          :class="currentIndex==index?'active':''"
          v-for="(item,index) in tabType"
          :key="index"
          @click="liClick(index)"
        >
          <a href="javascript:;">{{item}}</a>
        </li>
      </ul>
    </nav>
    <section class="info">
      <ul>
        <!-- <li>
          <h1>租房分期付款套路多 如何防止被骗</h1>
          <p>
            大谈房屋知识 2019.08.08
            <span class="icon text-r">
              <a href="#">&#xe607;</a>
              <a href="#">&#xe61b;</a>
              <a href="#">&#xe639;</a>
            </span>
          </p>
        </li>-->
        <li v-for="item in getCurrentList" :key="item.nid">
          <div v-if="item.imgList.length">
            <h1>{{item.title}}</h1>
            <div class="info-img">
              <img v-for="(pic,i) in item.imgList" :key="i" :src="pic" alt />
            </div>
            <p>
              {{item.source}} {{item.pubtime}}
              <span class="icon text-r">
                <a href="#">&#xe607;</a>
                <a href="#">&#xe61b;</a>
                <a href="#">&#xe639;</a>
              </span>
            </p>
          </div>
          <div v-else-if="item.imgPath2">
            <div class="info-l">
              <h1>{{item.title}}</h1>
              <p>
                {{item.source}} {{item.pubtime}}
                <span class="icon text-r">
                  <a href="#">&#xe607;</a>
                  <a href="#">&#xe61b;</a>
                  <a href="#">&#xe639;</a>
                </span>
              </p>
            </div>
            <img class="img-r" :src="item.imgPath2" />
          </div>
          <div v-else>
            <h1>{{item.title}}</h1>
            <p>
              {{item.source}} {{item.pubtime}}
              <span class="icon text-r">
                <a href="#">&#xe607;</a>
                <a href="#">&#xe61b;</a>
                <a href="#">&#xe639;</a>
              </span>
            </p>
          </div>
        </li>
      </ul>
    </section>
  </div>
</template>

<script>
import { getMoreInfo } from "../network/information";
export default {
  name: "information",
  data() {
    return {
      tabType: ["雷区", "行情", "科普"],
      allList: [],
      //   currentList: [],
      currentIndex: 0,
    };
  },
  methods: {
    // getCurrentList() {
    //   let arr = [];
    //   this.allList.forEach((v) => {
    //     if (v.type == this.tabType[this.currentIndex]) {
    //       arr.push(v);
    //     }
    //   });
    //   this.currentList = arr;
    // },
    liClick(index) {
      this.currentIndex = index;
    },
  },
  components: {},
  mounted() {
    getMoreInfo("/data/news_data.json")
      .then((res) => {
        if (res.data.code == 200) {
          this.allList = res.data.allList;
        } else {
          return "error";
        }
      })
      .catch(() => console.log("err"));
  },
  computed: {
    getCurrentList() {
      let arr = [];
      this.allList.forEach((v) => {
        if (v.type == this.tabType[this.currentIndex]) {
          arr.push(v);
        }
      });
      //   this.currentList = arr;
      return arr;
    },
  },
  watch: {
    // allList() {
    //   this.getCurrentList();
    // },
  },
};
</script>

<style src="../assets/css/infomore.css" scoped></style>
<style scoped>
.container {
  position: relative;
  z-index: 9;
  background-color: #fff;
}
</style>
